<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="800px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    append-to-body
    :title="title"
  >
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
    <el-tree
      :data="skillListArr"
      show-checkbox
      node-key="id"
      ref="tree"
      :props="defaultProps"
      :default-checked-keys="checkboxGroup"
      :filter-node-method="filterNode"
    >
    </el-tree>

    <!-- <div style="margin: 10px" v-for="item in skillListArr" :key="item.id">
      <el-checkbox-group v-model="checkboxGroup" size="small">
        <el-checkbox :label="item.id" :value="item.id" border>
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
    </div> -->

    <div
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
      "
    >
      <el-button @click="handleClose">返回</el-button>
      <el-button
        type="primary"
        @click="confirm('ruleForm')"
        v-no-more-click:3000
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { debounce } from "@/util";
import {
  ApiDoctorEdit,
  ApiDoctorAdd,
  ApiSkillList,
  ApiSkillListSave,
} from "@/api/index.js";
import ImgUploadPath from "@/components/imgUpload-path.vue";
import { validatePhone } from "@/util/validate";
export default {
  props: ["roleData", "departmentData"],
  components: {
    ImgUploadPath,
  },
  data() {
    return {
      validatePhone,
      checkboxGroup: ["1", "2", "3", "4", "5", "6", "7", "8"],
      skillListArr: [],
      dialogVisible: false,
      title: "",
      id: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      filterText: "",
    };
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /*    handleCheckChange(data, checked, indeterminate) {
      let val = [];
      if (indeterminate) {
        val.push(data.id);
      } else {
        val = val.filter((item) => item !== data.id);
      }
      this.checkboxGroup = val;
      console.log(this.checkboxGroup);
    }, */

    confirm: debounce(
      function () {
        let val = this.$refs.tree
          .getCheckedKeys()
          .filter((item) => typeof item != "string");
        ApiSkillListSave({ doctor_id: this.id, item: val }).then((res) => {
          this.$message.success("修改成功");
          this.handleClose();
          this.$emit("refresh");
        });
      },
      500,
      true
    ),

    getSkillList(id) {
      let val = [];
      ApiSkillList(id).then((res) => {
        this.skillListArr = res.data.data;
        this.checkboxGroup = res.data.checked;
      });
      /*   this.checkboxGroup = val; */
    },
    show(row) {
      this.id = row;
      /*  console.log("111111", row);
      const data = row || this.oldform;
      for (const key in this.oldform) {
        this.$set(this.form, key, data[key]);
      }
      if (row) {
        this.id = row.id;
        this.title = "编辑人员";
        if (row.icon) this.imgsDefalut = [{ url: this.$path + row.icon }];
      } else {
        this.id = null;
        this.title = "添加人员";
      } */
      this.title = "项目管理";
      this.dialogVisible = true;
      this.getSkillList(row);
    },

    handleClose() {
      this.dialogVisible = false;
      this.form = { ...this.oldform };
      this.$nextTick((_) => {
        this.$refs.formRef.clearValidate();
        this.$refs.ImgUploadPath.clear();
      });
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>

<style></style>
